<!--
  description: ShowMessage
  @author: GuoSiYue
  date: 2021-11-10
 -->

<template>
    <div>
        <!--<h2>{{message}}</h2>-->
        <h2>{{state.name}}</h2>
        <h2>当前计数：{{state.counter}}</h2>
        <button @click="decrement()">-1</button>
        <button @click="increment()">+1</button>
    </div>
</template>

<script>
    import { reactive } from 'vue'
    export default {
        name: "ShowMessage",
        props: {
            message: String
        },
        /**
         * 如果我们在setup函数中想要使用props，那么不可以通过 this 去获取
         * 因为props有直接作为参数传递到setup函数中，所以我们可以直接通过参数来使用即可
         * @param props
         */
        setup() {
            // console.log(props.message);
            // // 获取attrs
            // console.log(context.attrs.id, context.attrs.class);
            // console.log(context.slots.default);
            // console.log(context.slots.content);
            // console.log(context.emit);
            /**
             * setup的返回值可以在模板template中被使用；
             * 也就是说我们可以通过setup的返回值来替代data选项；
             */
           const state = reactive({
                name: "gsy",
                counter: 100
            })
            //甚至是我们可以返回一个执行函数来代替在methods中定义的方法：
            const increment = () => state.counter++
            const decrement = () => state.counter--

            return {
                state,
                increment,
                decrement
            }
        }
    }
</script>

<style scoped>

</style>